<!DOCTYPE html>
<html>
<head>
	<title>子账户列表</title>
	<!--#include("../../common/common-link.html"){}-->
	<script src="${ctx}/assets/js/qrcode.min.js"></script>
	<style type="text/css">
		.table-panel .table-content .operation .btn{width:89px;}
		.detail-div{padding:10px 0;}
		.detail-row{text-align: center;height: 29px;line-height: 29px;}
		.detail-row .col{display: inline-block;}
		.detail-row .col-l{font-size: 16px;width:90px;text-align:right;}
		.detail-row .col-r{font-size: 14px;color:#555;width:210px;text-align:left;}
		#alipay-auth-qrcode{text-align: center;display: none}
		#alipay-auth-qrcode .qrcode-img{padding: 30px;}
	</style>
</head>
<body>
	<div id="container-wrap" style="display:none;">
		<div class="table-panel">
			<div class="header">
				<h4 class="title">条件筛选</h4>
			</div>
			<div class="conditions">
				<div class="col">
                    <div class="input-group">
                        <span class="input-group-addon addon">邮箱</span>
                        <input type="text" class="form-control" :value="form.email" v-model="form.email">
                    </div>
                </div>
                <div class="col">
                    <div class="input-group">
                        <span class="input-group-addon addon">手机号</span>
                        <input type="text" class="form-control" :value="form.phone" v-model="form.phone">
                    </div>
                </div>
                <div class="col">
					<input class="btn button ok-btn" type="button" value="查&emsp;询" @click="query">
					<input class="btn button reset-btn" type="button" value="重&emsp;置" @click="reset">
				</div>
			</div>
			<div class="header">
				<h4 class="title">子账户列表</h4>
				<div class="btns-group">
					<input type="button" class="btn button addBtn" @click="add" value="添加子账户"/>
				</div>
			</div>
			<div class="content">
				<table class="table-content">
					<tr>
						<th width="3%">序号</th>
						<th width="20%">邮箱</th>
						<th width="20%">电话</th>
						<th width="20%">绑定聚合码别名</th>
						<th width="12%">状态</th>
						<th width="25%">操作</th>
					</tr>
					<template v-if="list&&list.length>0">
						<tr v-for="(item,index) in list">
							<td>{{index+1}}</td>
							<td>{{item.email}}</td>
							<td>{{item.phone}}</td>
							<td>{{item.paycodeAlias}}</td>
							<td>
								<span v-if="item.status">可用</span>
								<span v-else>不可用</span>
							</td>
							<td class="operation">
								<div class="btn-group">
									<input class="btn btn-warning btn-sm" type="button" value="修&emsp;改" @click="modify(item.id)">
								</div>
							</td>
						</tr>
					</template>
					<template v-else>
						<tr>
							<td colspan="6">没有子账户列表</td>
						</tr>
					</template>
				</table>
			</div>
		</div>
		<div id="page"></div>
	</div>
</body>
<script type="text/javascript">
	var data = {};
	var form={};
	function initVue(){
		form.email='';
		form.phone='';
		form.pageSize=10;
		data.form=form;
		new Vue({
			el:"#container-wrap",
			data:data
		});
		Vue.nextTick(function() {
			$("#container-wrap").show();
		});
	};
	function query(){
		resetQuery();
		request();
	};
	function reset() {
		util.reset(form);
	};
	function resetQuery(){
		form.currentPageIndex=1;
	};
	function request(callback) {
		var load_id = util.load();
		util.post({
			url:"subList",
			data:form,
			success : function(result) {
				$.extend(data, result);
				Vue.nextTick(function() {
					page();
				});
			},
			complete : function() {
				layer.close(load_id);
			}
		},callback);
	};
	function add(){
		window.location.href="sub-add";
	};
	function modify(id){
		window.location.href="sub-modify?id="+id;
	};
	function page() {
		util.laypage({
			elem : 'page',
			count : data.totalRecord,
			limit : form.pageSize,
			curr : form.currentPageIndex,
			jump : function(obj, first) {
				form.currentPageIndex = obj.curr;
				if (!first) {
					form.pageSize=obj.limit;
					request();
				}
			}
		});
	};
	function initialize(){
		layui.use(['laypage'], function(){
			laypage = layui.laypage;
			request(initVue);
		});
	};
</script>
</html>